<template>
	<view class="auth-lists">
		<!-- 选项卡 -->
		<view class="tabs-wrap">
			<com-tabs gap="26rpx" padding="0 12rpx" :tabs="tabs" :active="params.is_audit" @change="changeTab"></com-tabs>
		</view>
		
		<view class="lists">
			<block v-if="lists.length">
				<view class="list-item" v-for="(item,index) in lists" :key="index" @click="goAuthDetail(item)">
					<!-- <view class="title">{{item.agent_linkman}}-{{item.agent_name}}</view> -->
					<view class="title">申请人：{{item.linkman}}</view>
					<view class="info-list">
						<view class="info-item">审核服务商：{{item.agent_linkman}}</view>
						<view class="info-item">校园名称：{{item.school_name}}</view>
						<view class="info-item">申请时间：{{item.apply_time}}</view>
						<view class="info-item">审核状态：
							<view class="tags">
								<view v-if="item.is_audit === null" class="tag-item ">未提交</view>
								<view v-if="item.is_audit === -1" class="tag-item tag-wait">已驳回</view>
								<view v-if="item.is_audit === 0" class="tag-item tag-wait">待审核</view>
								<view v-if="item.is_audit === 1" class="tag-item tag-success">已审核</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			
			<view v-else class="empty">暂无数据</view>
		</view>
		
		<!-- 授权 -->
		<authorize-popup ref="authorize" @rejects="handleRejects" @success="getData"></authorize-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [
					{ label: '全部', value: '' },
					{ label: '已审核', value: 1 },
					{ label: '待审核', value: 0 },
					{ label: '已驳回', value: -1 },
				],
				params: {
					limit: 10, // integer  页数 可选 示例值: 10
					page: 1, // integer  页码 可选 示例值: 1
					key: '', // string  可选 搜索：学校/服务商/联系人
					is_audit: '', // integer  可选 审核状态：null全部；-1驳回；0待审核；1已审核
				},
				lists: [],
				more: true, 
				loading: true
			};
		},
		onLoad() {
			this.getData()
		},
		onReachBottom() {
			if (this.more) {
				this.getList()
			}
		},
		methods: {
			// 切换状态
			changeTab(value) {
				this.params.is_audit = value
				this.getData()
			},
			// 前往认证详情页面
			goAuthDetail(item) {
				uni.navigateTo({
					url: '/pages/agent/auth-detail/auth-detail?agentId='+item.agent_gid
				})
			},
			// 获取数据
			getData() {
				this.params.page = 1
				this.getList()
			},
			// 获取列表
			getList() {
				this.$api.userIdentityListApi(this.params).then(res=> {
					if (this.params.page === 1) {
						this.lists = []
					}
					
					if (res.data.length === 0 || res.data.length < this.params.limit) {
						this.more = false
					} else {
						this.more = true
					}
					const oldlist = [...this.lists]
					this.lists = oldlist.concat(res.data)
				}).catch(err=> {
					console.log('err', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.auth-lists {
		padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		
		.tabs-wrap {
			position: sticky;
			top: 0;
			z-index: 999;
			padding: 0 32rpx;
			background-color: #FFFFFF;
		}
			
		.lists {
			padding: 52rpx 32rpx;
			
			.list-item {
				padding: 32rpx;
				margin-bottom: 32rpx;
				border-radius: 26rpx;
				background-color: #FFFFFF;
			}
			
			.title {
				color: #000000;
				font-size: 34rpx;
				font-weight: 400;
				text-align: left;
				line-height: 46rpx;
			}
			
			.info-list {
				gap: 8rpx;
				display: flex;
				padding-top: 36rpx;
				// padding-bottom: 38rpx;
				flex-direction: column;
			}
			
			.info-item {
				color: #999999;
				font-size: 26rpx;
				text-align: left;
				font-weight: 400;
				line-height: 36rpx;
				
				display: flex;
				align-items: center;
			}
			
			.tags {
				display: flex;
				align-items: center;
				gap: 10rpx;
			}
			
			.tag-item {
				display: flex;
				align-items: center;
				justify-content: center;
				
				padding: 4rpx 8rpx;
				border-radius: 8rpx;
				background-color: #868686;
				
				color: #FFFFFF;
				font-size: 18rpx;
				font-weight: 400;
				line-height: 24rpx;
				text-align: left;
			}
			
			.tag-success {
				background-color: #009D6E;
			}
			
			.tag-complate {
				background-color: #D4D4D4;
			}
			
			.tag-wait {
				background-color: #003D99;
			}
			
			.item-btn {
				padding: 0;
				margin: 0;
				height: 62rpx;
				border-radius: 26rpx;
				background: var(--gradient-color-vertical);
				
				display: flex;
				align-items: center;
				justify-content: center;
				
				&::after {
					border: none;
				}
				
				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 38rpx;
				text-align: left;
			}
		}
	}
</style>
